
<template>
	<view class="contont">
		<!-- 顶部选项卡 -->
		<view :style="{paddingTop:statuHeight+'px'}" class="tabs-box">
			<ms-tabs :list="topTabbarList" v-model="active" itemColor='#FFFFFF' lineColor='#FFFFFF'  @input="tabInput"/>
		</view>
		<!-- 轮播图 -->
		<scroll-view scroll-y="true" refresher-enabled="true" class="sv" :refresher-triggered="triggered" :refresher-threshold="100"
				@refresherrefresh="onRefresh" @refresherabort="onAbort" :style="{height:navHeight+'px'}">
		<view class="main">
			<view class="banner">
				<view class="banner-box">
					<swiper autoplay :circular="true" indicator-dots indicator-color="#FFFFFF" indicator-active-color="#00C4FA"
					style="border-radius: 8px;overflow: hidden;" duration="400">
						<swiper-item v-for="(item,index) in swipers" :key="item.id">
							<image :src="item.imgUrl" class="bannerImg" mode="scaleToFill" style="border-radius: 8px;overflow: hidden;"></image>
						</swiper-item>
					</swiper>
				</view>
			</view>
			<!--    猜你喜欢 -视频       -->
			<view class="two-guess-like-box">
				<view class="video-sort">
						<view class="small-video" >
							<view v-for="(item,i) in homeList" :key="i" class="video-alone"  @click="videoDetail(item.furl,item.vid)">
								<view class="main-video">
									<image :src="item.fcoverUrl" mode="aspectFill"></image>
									<view class="vip-logo" v-if="item.vvip">VIP</view>
								</view>
								<view class="newest"><text class="newest-ident"></text>{{item.vcoverTitle}}</view>
							<!-- 	<view class="many-see">
									<view>2.0 万人看过</view>
									<view>355</view>
								</view> -->
							</view>
						</view>
				</view>
			</view>
		</view>
		</scroll-view>
		<!-- 底部导航 -->
		<tabber :tabIndex='1'></tabber>
	</view>
</template>

<script>
	import tabber from '@/components/tabbar.vue'
	import msTabs from '@/components/ms-tabs.vue'
	import { $POST, $GET } from '../../network/api.js'
	export default {
		components:{tabber,msTabs},
		data() {
			return {
				triggered: false, // 下拉刷新开关
				navHeight: 0, // 下拉主体高度
				windowHeight: 0, // 可视高度
				slideshow: { // 轮播图参数
					advType: 1, // 广告类型：轮播=1，vip=2，搜索=3
					channelId: 1, // 大类频道ID
					fType: 1 // 文件类型 视频：1，图片：2
				},
				videoFormL: { // 视频列表参数
					channelId: 1, // 大类频道id
					isVip: 1, // 是否是vip，0:非vip，1:VIP
					pageNum: 1, // 当前页
					pageSize: 10 // 当前页数
				},
				active: 0,
				statuHeight: uni.getSystemInfoSync().statusBarHeight,
				homeList: [
					{
						vcoverTitle: '天龙八部',
						vid:2,
						fcoverUrl:'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
						furl:'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
					},
					{
						vcoverTitle:'射雕',
						vid:3,
						fcoverUrl:'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
						furl:'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
					},
					{
						vcoverTitle: '天龙八部',
						vid:2,
						fcoverUrl:'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
						furl:'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
					},
					{
						vcoverTitle:'射雕',
						vid:3,
						fcoverUrl:'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
						furl:'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
					},
					{
						vcoverTitle: '天龙八部',
						vid:2,
						fcoverUrl:'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg',
						furl:'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
					},
					{
						vcoverTitle:'射雕',
						vid:3,
						fcoverUrl:'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg',
						furl:'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
					},
				], // 视频数据
				swipers:[ // 轮播图数据
					{ imgUrl: 'https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg', id: 1 },
					{ imgUrl: 'https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg', id: 2 },
					{ imgUrl: 'https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg', id: 3 },
					{ imgUrl: 'https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg', id: 4 },
					{ imgUrl: 'https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg', id: 5 },
					{ imgUrl: 'https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg', id: 6 },
					{ imgUrl: 'https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg', id: 7 },
					{ imgUrl: 'https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg', id: 8 }
				], 
				topTabbarList:[] // 顶部选项卡数据
			}
		},
		onReady(){
			this.getHight() // 获取高度
		},
		onLoad() {
			// this.getVideo() // 获取视频列表
			this.getTopTabbar() // 调用头部选项卡方法
			// this.getBanner() // 调用轮播图方法
		},
		onShow() {
			// 隐藏官方tabber
			uni.hideTabBar()
		},
		mounted() {
			this.videoplay = wx.createVideoContext('myVideo')
		},
		methods: {
			// 获取设备高度
			getHight() {
				const vm = this;
				uni.getSystemInfo({ //调用uni-app接口获取屏幕高度
					success(res) { //成功回调函数
						vm.windowHeight = res.windowHeight //windoHeight为窗口高度，主要使用的是这个
						let titleH = uni.createSelectorQuery().select(".sv")
						titleH.boundingClientRect(data=>{
							vm.navHeight = vm.windowHeight - data.top //计算高度：元素高度=窗口高度-元素距离顶部的距离（data.top）
						}).exec()
					}
				})
			},
			// 关闭下拉刷新
			onAbort() {
				const vm = this
				setTimeout(() => {
					vm.triggered = false;
				}, 100)
			},
			// 下拉刷新
			onRefresh() {
				const vm = this
				vm.triggered = true	
				vm.getVideo() 		
			 },
			// 跳视频详情
			 videoDetail(url,id) {
				 console.log("视频地址：",url)
				uni.navigateTo({
					url: '/pages/home/video_details?videoUrl='+url+'&vid='+id
				})
			 },
			// 获取轮播图
			getBanner() {
				$POST('/boke-item/file/getCarouselAdv',this.slideshow).then(res => {
					this.swipers = res.data
				})
			},
			// 获取视频列表
			async getVideo() {
				const res = await $POST('/boke-item/file/getVideoFile',this.videoFormL)
				this.onAbort() // 关闭下拉刷新
				this.homeList = res.data
			},
			// 选项卡input事件
			tabInput(value,item) {
				this.videoFormL.channelId = item.value // 赋值id到视频列表
				this.slideshow.channelId = item.value // 赋值id到轮播图
				this.getVideo() // 视频列表方法
				this.getBanner() // 轮播图方法
			},
			// 获取头部选项卡
			async	getTopTabbar() {
				const res = await $GET('/boke-item/channel/getChannel')
				const tabList = res.data.filter(item => {
					if (item.vcName == "推荐" || item.vcName == "日系频道") return item
				})
				this.topTabbarList = tabList.map(item => ({title: item.vcName, value: item.vcId}))
			},
		}
	}
</script>
<style lang="scss" scoped>
	.contont{
		background-color: #F1F1F1;
		.tabs-box{
			display: flex;
			justify-content: space-around;
			align-items: center;
			background: #5B2177;
			ms-tabs{
				width: 100%;
				display: flex;
				justify-content: space-around;
				align-items: center;
			}
			/deep/ .tab__item {
				color: #F4F4F4 !important;
				font-size: 30rpx;
				font-family: PingFang SC;
				font-weight: 400;
			}
			/deep/ .tabBlock .tab__line {
				height: 6rpx !important;
				border-radius: 3rpx !important;
			}
			/deep/ .tab__item-title{
				margin: 0 30rpx !important;
			}
			/deep/ .tab__item--active{
				font-size: 36rpx;
				font-weight: bold;
				font-family: PingFang SC;
				color: #FFFFFF !important;
			}
		
		}
		.main{
			margin-bottom: 85px;
			// bannet图
			.banner{
				background: #fff;
				.banner-box{
					height: 340rpx;
					padding: 30rpx 24rpx 40rpx 24rpx;
					overflow: hidden;
					position: relative;
					/deep/ .wx-swiper-dots-horizontal{
						left: unset!important;
						right:-14rpx;
					}
					/deep/ .uni-swiper-dots-horizontal{
						left: unset!important;
						right:-14rpx;
					}
					swiper {
						width: 100%;
						height: 100%;
						display: block;
				
						.bannerImg {
							display: block;
							max-width: 100%;
							width: 100%;
							height: 100%;
							border-radius: 5px;
						}
					}
				}
			}
			//  列表二	猜你喜欢
			.two-guess-like-box{
				background-color: #FFFFFF;
				padding: 0 29rpx 49rpx 29rpx;
				margin-bottom: 10rpx;
		
				// 视频
				.video-sort{
						.small-video{
							display: flex;
							align-items: center;
							flex-wrap: wrap;
							.video-alone:nth-child(2n) {
								margin-right: 0 !important;
							}
							.video-alone{
								width: 340rpx;
								// height: 280rpx;
								margin-right: 7px;
								.main-video{
									width: 339rpx;
									height: 192rpx;
									border-radius: 10rpx;
									position: relative;
									z-index: 9 !important;
									image{
										width: 100%;
										height: 100%;
										border-radius: 10rpx;
									}
									.vip-logo{
										position: absolute;
										left: 0;
										top: 0;
										width: 99rpx;
										height: 30rpx;
										background: #000000;
										// background: rgba(0,0,0,.36);
										opacity: 0.5;
										border-radius: 10rpx 0rpx 10rpx 0;
										text-align: center;
										line-height: 30rpx;
										font-size: 22rpx;
										font-family: PingFang SC;
										font-weight: 500;
										color: #EDA424;
									}
								}
								.newest{
									font-size: 28rpx;
									font-family: PingFang SC;
									font-weight: 500;
									color: #333333;
									margin-top:16rpx;
									// text-align: center;
									display: -webkit-box;
									-webkit-box-orient: vertical;
									-webkit-line-clamp: 1;
									overflow: hidden;
									.newest-ident{
										color: #EE4242;
									}
								}
								.many-see{
									width: 100%;
									display: flex;
									justify-content: space-between;
									align-items: center;
									font-size: 20rpx;
									font-family: PingFang SC;
									font-weight: 400;
									color: #666666;
									padding-bottom: 29rpx;
								}
							}
						}
				}
			}
		}
	}






</style>
